Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / SidebarLink.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tff7b72<templateTff7b72>

Tff7b72<RouterLink Te6edf3v-slot=Ta5d6ff"{ href, navigate, isActive }" Te6edf3:to=Ta5d6ff"to" customTff7b72>

Tff7b72<a

Te6edf3:href=Ta5d6ff"href"

Te6edf3type=Ta5d6ff"button"

Te6edf3:class=Ta5d6ff"[

isActive

? 'bg-blue-100 text-blue-800 group:text-blue-800 dark:bg-zinc-800 dark:text-blue-300'

: 'hover:bg-gray-100 dark:hover:bg-zinc-700',

isCollapsed ? 'overflow-visible' : 'overflow-hidden',

]"

Te6edf3class=Ta5d6ff"w-full text-gray-800 dark:text-zinc-200 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:focus-visible:outline-zinc-500"

@Te6edf3click=Ta5d6ff"handleNavigate($event, navigate)"

Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"my-auto shrink-0"Tff7b72>

Tff7b72<slot Te6edf3name=Ta5d6ff"icon"Tff7b72>Tff7b72</slot>

Tff7b72</span>

Tff7b72<span Te6edf3v-if=Ta5d6ff"!isCollapsed" Te6edf3class=Ta5d6ff"my-auto flex w-full truncate transition-all duration-300"Tff7b72>

Tff7b72<slot Te6edf3name=Ta5d6ff"text"Tff7b72>Tff7b72</slot>

Tff7b72</span>

Tff7b72</a>

Tff7b72</RouterLink>

Tff7b72</template>

Tff7b72<scriptTff7b72>

export default {

name: "SidebarLink",

props: {

to: {

type: Object,

required: true,

},

isCollapsed: {

type: Boolean,

default: false,

},

},

emits: ["click"],

methods: {

handleNavigate(event, navigate) {

// emit click event for SidebarLink element

this.$emit("click");

// handle navigation

navigate(event);

},

},

};

Tff7b72</script>